// 新闻时事
<template>
<!-- 无线滚动 -->
<div
 v-infinite-scroll="load"
    style="
      overflow: auto;
      height: 1000px;
      margin-top:15px
      padding: 0px;
      margin: 0px;
    ">
    <el-card class="article-card" v-for="o in count" :key="o" style="height:980px" >
    <!-- 循环遍历文章模板 -->

    <div v-for="item in menus" :key="item.id" style="padding: 0px; margin: 0px">
      <!-- 左边图片部分 -->
      <el-row type="flex" class="row-bg">
        <el-col :span="14">
          <el-card class="img-card">
            <div class="article-img" style="height: 100%; width: 100%">
              <router-link :to="'/home/newsinfo/' + item.id"
                ><img :src="verifyCode" height="100%" width="100%"
              /></router-link>
            </div>
          </el-card>
        </el-col>
        <el-col>
          <!-- 右边标题和简介 -->
          <div class="article-mid">
            <router-link :to="'/home/newsinfo/' + item.id">
              <h2>
                {{ item.title }}
              </h2> </router-link
            ><br />
            <p class="intro">
              {{ item.content }}
            </p>
            <!-- 文章简介下四个显示的小标签 -->
            <div class="display-function">
              <el-tag size="medium" type="info">点赞数量</el-tag>
              <el-tag size="medium" type="info">评论数量</el-tag>
              <el-tag size="medium" type="info">阅读数量</el-tag>
              <el-tag size="medium" type="info">发布日期</el-tag>
            </div>
          </div>
        </el-col>
      </el-row>
      <hr />
    </div>
  </el-card>
</div>

</template>


<script>

export default {
  data () {
    return {
      count: 1,
      //文章数组
      menus: [
        {
          id: 1,
          title: "大奉打更人",
          content:
            "浩瀚的宇宙中，一片星系的生灭，也不过是刹那的斑驳流光。仰望星空，总有种结局已注定的伤感，千百年后你我在哪里？家国，文明火光，地球，都不过是深空中的一粒尘埃。星空一瞬，人间千年。虫鸣一世不过秋，你我一样在争渡。深空尽头到底有什么？",
        },
        {
          id: 2,
          title: "圣墟",
          content:
            "在破败中崛起，在寂灭中复苏。沧海成尘，雷电枯竭，那一缕幽雾又一次临近大地，世间的枷锁被打开了，一个全新的世界就此揭开神秘的一角……",
        },
        {
          id: 3,
          title: "这游戏也太真实了",
          content:
            "这游戏也太真实了叭！怎么打着打着队友的衣服就没了？什么？你问我这游戏正经不？当然正经了！搬砖、跑腿、捡垃圾、送快递……公司最多能让你体会到996的艰辛，在这里你能体会到超级加倍的007。还有比这更真实的游戏？好了，不废话了，伟大的管理者大人喊我去搬砖了。那位大人说了，只要我们献上自己的肝，下个月他又能换一套全新的动力甲，到时候带我们开全新的地图，去广阔的废土捡更多的垃圾！……正经的简介：穿越到废土世界的楚光发现，自己解锁了避难所系统，能够从自己穿越之前的世界召唤名为“玩家”的生物。从那天开始，整个废土都不正经了。",
        },
        {
          id: 4,
          title: "斗破苍穹",
          content:
            "这里是属于斗气的世界，没有花俏艳丽的魔法，有的，仅仅是繁衍到巅峰的斗气！新书等级制度：斗者，斗师，大斗师，斗灵，斗王，斗皇，斗宗，斗尊，斗圣，斗帝。……",
        }, {
          id: 5,
          title: "夜的命名术 ",
          content: "蓝与紫的霓虹中，浓密的钢铁苍穹下，数据洪流的前端，是科技革命之后的世界，也是现实与虚幻的分界。钢铁与身体，过去与未来这里，表世界与里世界并存，面前的一切，像是时间之墙近在眼前。黑暗逐渐笼罩。可你要明白啊我的朋友，我们不能用温柔去应对黑暗，要用火。"
        }, {
          id: 6,
          title: "大奉打更人",
          content:
            "浩瀚的宇宙中，一片星系的生灭，也不过是刹那的斑驳流光。仰望星空，总有种结局已注定的伤感，千百年后你我在哪里？家国，文明火光，地球，都不过是深空中的一粒尘埃。星空一瞬，人间千年。虫鸣一世不过秋，你我一样在争渡。深空尽头到底有什么？",
        },
        {
          id: 7,
          title: "圣墟",
          content:
            "在破败中崛起，在寂灭中复苏。沧海成尘，雷电枯竭，那一缕幽雾又一次临近大地，世间的枷锁被打开了，一个全新的世界就此揭开神秘的一角……",
        },
        {
          id: 8,
          title: "这游戏也太真实了",
          content:
            "这游戏也太真实了叭！怎么打着打着队友的衣服就没了？什么？你问我这游戏正经不？当然正经了！搬砖、跑腿、捡垃圾、送快递……公司最多能让你体会到996的艰辛，在这里你能体会到超级加倍的007。还有比这更真实的游戏？好了，不废话了，伟大的管理者大人喊我去搬砖了。那位大人说了，只要我们献上自己的肝，下个月他又能换一套全新的动力甲，到时候带我们开全新的地图，去广阔的废土捡更多的垃圾！……正经的简介：穿越到废土世界的楚光发现，自己解锁了避难所系统，能够从自己穿越之前的世界召唤名为“玩家”的生物。从那天开始，整个废土都不正经了。",
        },
        {
          id: 9,
          title: "斗破苍穹",
          content:
            "这里是属于斗气的世界，没有花俏艳丽的魔法，有的，仅仅是繁衍到巅峰的斗气！新书等级制度：斗者，斗师，大斗师，斗灵，斗王，斗皇，斗宗，斗尊，斗圣，斗帝。……",
        }, {
          id: 10,
          title: "夜的命名术 ",
          content: "蓝与紫的霓虹中，浓密的钢铁苍穹下，数据洪流的前端，是科技革命之后的世界，也是现实与虚幻的分界。钢铁与身体，过去与未来这里，表世界与里世界并存，面前的一切，像是时间之墙近在眼前。黑暗逐渐笼罩。可你要明白啊我的朋友，我们不能用温柔去应对黑暗，要用火。"
        },
      ],
      //图片地址
      verifyCode: require("./img/125855Qm4nr.jpg"),
      clickedData: [],
    };
  },
  methods: {
    load () {
        this.count += 1;
    },
  },

  computed: {},
};
</script>

<style scoped>
.display-function {
  color: #666;
  padding-top: 35px;
}

/* 点赞评论数量标签 */
.el-tag.el-tag--info {
  margin-left: 5px;
}
/* 首页标题靠左 */
h2 {
  display: flex;
  justify-content: flex-start !important;
}
/* 标题和简介靠右 */
.article-mid {
  float: right;
}
.img-card {
  width: 360px;
  padding: 0 !important;
}

/* 文章内容框 */
p.intro {
  font-size: 14px;
  line-height: 24px;
  overflow: hidden;
  height: 100px;
  margin-bottom: 8px;
  color: #666;
}
</style>